<style>


    .el-table__header {
        border: 0px solid white;
    }

    .el-table {
        margin-top: 15px;
    }

    .has-gutter th {
        background-color: #2772ff;
        height: 45px;
        text-align: center;
        color: white !important;
    }
</style>


<div style="min-height: 790px" id="dphjtbox2">
    <div style="padding: 10px">
        <el-tabs v-model="activeName">
            <el-tab-pane label="添加信息" name="first">

                <el-form ref="form" :model="info" label-width="80px">

                    <el-form-item label="店铺名">
                        <el-input size="small" v-model="info.shaopname" placeholder="请输店铺名" class="long"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺ID">
                        <el-input size="small" v-model="info.shopid" placeholder="请输入店铺ID" class="long"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input size="small" v-model="info.phone" placeholder="请输正确的手机号以供验证" class="long"></el-input>
                    </el-form-item>
                    <el-form-item label="微信">
                        <el-input size="small" v-model="info.wx" placeholder="请输入微信" class="long"></el-input>
                    </el-form-item>
                    <el-form-item label="QQ">
                        <el-input size="small" v-model="info.qq" placeholder="请输入QQ（非必填）" class="long"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="success" @click="setinf">提交信息</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="店铺列表" name="second">
                <div class="bodybox">

                    <el-table
                            v-loading="listLoading"
                            :data="list"
                            element-loading-text="Loading"

                            fit
                            highlight-current-row
                    >


                        <el-table-column align="center" label="店铺名">
                            <template slot-scope="scope">
                                {{ scope.row.name }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="店铺ID" prop="shopid">
                        </el-table-column>

                        <el-table-column align="center" label="手机号" prop="phone">
                        </el-table-column>
                        <el-table-column align="center" label="微信" prop="wx">
                        </el-table-column>
                        <el-table-column align="center" label="QQ" prop="qq">
                        </el-table-column>

                        <el-table-column label="审核状态" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" align="center" prop="remark">

                        </el-table-column>


                    </el-table>
                    <div class="hang">
                        <el-pagination
                                background
                                @size-change=""
                                @current-change="current_change"
                                layout="total,prev, pager, next"
                                :page-size="this.limit"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>


        </el-tabs>

    </div>


</div>


<script>

    new Vue({
        el: '#dphjtbox2',
        filters: {
            statusFilter(status) {
                const statusMap = {
                    '已通过': 'success',
                    '待审核': 'gray',
                    '已发奖励': 'gray',
                    '已拒绝': 'danger'
                };
                return statusMap[status]
            }
        },
        data() {


            return {
                activeName: "first",
                info: {
                    shaopname: "",
                    shopid: "",
                    phone: "",
                    wx: "",
                    qq: "",
                },
                form: {
                    user_id: '<?php echo $this->user_id; ?>',
                    phone: "",
                    name: "",
                    username: "",
                    createDate: [],
                },
                userId: "",

                formLabelWidth: '145px',
                dialogFormVisible: false,
                dialogadduser: false,
                dialogaEdit: false,
                discountlist: [0.95, 0.9, 0.85, 0.8],
                coupontype: {
                    ZKJ: "折扣券",
                    LJJ: "立减券",
                },
                page: 1,
                limit: 10,
                total: 0,
                list: null,
                listLoading: true,
                dialogVisible: false,
                dialogImageUrl: [],
            }
        },
        created() {
            this.getlist(1);
        },
        computed: {},
        methods: {
            getlist(page = "") {
                this.listLoading = true;
                //var url = 'Customer/geshoplist';
                var url = "<?php echo base_url(); ?>/Customer/geshoplist";
                var postdata = {};
                $.each(this.form, function (i, v) {
                    postdata[i] = v;
                });
                if (page) {
                    this.page = page
                    postdata.page = this.page;
                } else {
                    postdata.page = 1;
                    this.page = 1;
                }
                postdata.epage = this.limit;
                if (postdata.createDate.length > 0) {
                    postdata.date1 = postdata.createDate[0];
                    postdata.date2 = postdata.createDate[1];
                    delete postdata.createDate;
                }

                var that = this;

                $.post(url, postdata, function (data) {

                    if (data.code == 0) {
                        that.listLoading = false;
                        that.list = data.list;
                        that.total = data.count
                    } else {
                        that.listLoading = false;
                        that.$message({
                            message: data.msg,
                            type: 'warning',
                            offset: 300,
                            duration: 1500
                        });

                    }

                }, 'json');


            },
            onSubmit() {
                this.getlist();
            },
            onCancel() {
                Object.assign(this.$data.form, this.$options.data().form);
            },
            current_change(currentPage) {
                this.page = currentPage;
                this.getlist(currentPage);
            },
            setinf() {

                let pass = true;

                var postdata = {};
                $.each(this.info, function (i, v) {
                    postdata[i] = v;
                });


                $.each(this.info, function (i, value) {
                    if (value == "" && i != 'qq') {
                        layer.msg("缺少信息");
                        pass = false;
                        return false
                    }
                });
                if (!pass) {
                    return;
                }
                var url = "<?php echo base_url(); ?>/Business/addinfo";

                let that = this;
                $.post(url, postdata, function (data) {
                    if (data.code == 0) {
                        that.$message({
                            message: '提交成功',
                            type: 'success',
                            offset: 300,
                            duration: 1500
                        });

                        that.getlist(1);
                        that.activeName = 'second';
                    } else {
                        layer.msg(data.msg);
                    }

                }, 'json');
            }


        },
    })


</script>

<style>
    .el-form {
        height: auto;
        overflow: hidden;
        padding: 10px;
    }

    .uploadPicButton {
        display: inline-block !important;
        float: right;
        width: 200px !important;
    }

    .el-upload__input {
        display: none !important;
    }

    .upload-demo {
        display: inline-block;
        width: auto;
        float: right;

    }


    .hang {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 8px 0px;
    }

    /* .el-form-item {
         margin-top: 6px;
         margin-bottom: 6px;
         width: 45%;
         max-width: 430px;
         float: left;
         margin-left: 1%;
     }*/

    .el-input, .el-select {
        width: 100%;
    }

    .bodybox {
        background-color: white;
        width: 96%;
        margin: auto;
        margin-top: 10px;
    }

    .el-table {
        border: solid 1px rgba(233, 233, 233, 1)
    }

    .el-form {
        height: auto;
        overflow: hidden;
        padding-bottom: 10px;
    }

    .hang {
        width: 100%;

        border-bottom: 0;
        height: 40px;
    }

    .hang .el-button {
        float: right;
        margin-right: 10px;
        height: 30px;
        line-height: 5px;
        margin-top: 5px;
    }


    .title {
        font-size: 13px;
        font-weight: 700;
        margin-left: 20px;
        line-height: 40px;
    }


    .line {
        text-align: center;
    }


    .el-pagination {
        margin-top: 5px;
        float: right;
        margin-right: 20px;
    }

    .copy {
        cursor: pointer;
        color: #1482f0;

    }


</style>
